<template>
  <view class="comments-box">
    <view class="comments-header">
      <view class="comments-header__logo">
        <image :src="url+comments.user.avatar" mode="aspectFill"></image>
      </view>
      <view class="comments-header__info">
        <view class="text_body">
          <view class="title">
            {{comments.user.userName}}
          </view>
          <view class="info">
            {{comments.content}}
          </view>
          <view class="content" v-for="item in comments.replys">
            <view class="content_tou" v-if="item.fromOpenid != null" @click="commentsReply({comments:comments,is_reply:true})">
              <view class="img">
                <image :src="url+comments.user.avatar" mode="aspectFill"></image>
              </view>
              <view class="name">
                <view class="title">
                  {{item.fromName}} &nbsp;&nbsp; <u-icon name="rewind-right-fill" size="28"></u-icon>&nbsp;&nbsp;
                  {{item.toName}}
                </view>
                <view class="text">
                  {{item.createReplyTime}}
                </view>
                <view class="text">
                  {{item.replyContent}}
                </view>
              </view>

            </view>

          </view>
        </view>
        <view class="text_footer">
          <view class="time">
            {{comments.createTime}}
          </view>
          <view class="icon">
            <uni-icons class="message" @click="commentsReply({comments:comments,is_reply:true})" style="margin-right: 10px;" type="chat" size="20" color="#3BA2FF"></uni-icons>
            <uni-icons style="margin-right: 10px;" type="hand-thumbsup" size="20" color="#3BA2FF"></uni-icons>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "components-box",
    data() {
      return {
      };
    },
  
    props: {
      comments: {
        type: Object,
        default () {
          return {}
        },
      },
      url:String,
      reply: {
        type: Boolean,
        default: false
      }
    },
    onLoad() {},
    methods: {
      commentsReply(comment) {
        this.$emit('reply', comment)
      },
    }
  }
</script>

<style lang="scss">
  .comments-box {
    margin: 15px 0px;
    font-size: 12px;

    //  头部区域
    .comments-header {
      display: flex;
      // align-items: center;
      padding: 0px 15px;
      margin-top: 10px;
      // margin-bottom: 10px;
      // box-shadow: #1A1A1A;

      // 头像
      .comments-header__logo {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 15px;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      // 文字信息框
      .comments-header__info {
        border-bottom: 1px solid #CCCCCC;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        margin-left: 5px;
        padding-bottom: 10px;
        width: 100%;
        // line-height: 1;
        color: #424242;

        .text_body {
          .title {
            font-size: 12px;
            color: #424242;
          }

          .content {
            .content_tou {
              display: flex;
              background-color: rgba(241, 243, 244, 1);
              padding: 5px;
              margin-top: 5px;
              margin-bottom: 10px;

              .img {
                width: 30px;
                height: 30px;
                flex-shrink: 0;
                border-radius: 15px;
                overflow: hidden;

                image {
                  width: 100%;
                  height: 100%;
                }
              }

              .name {
                margin-left: 5px;
                font-size: 12px;

                .text {
                  font-size: 12px;
                }
              }

            }
          }
        }

        .text_footer {
          display: flex;
          justify-content: space-between;

          .icon {
            .message{

            }
          }
        }
      }
    }

  }
</style>
